<template>
  <div class="login">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>vite2-vue3后台管理系统</span>
        </div>
      </template>
      <div>
        <el-form ref="formRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
          <el-form-item prop="name">
            <el-input v-model="ruleForm.name" clearable placeholder="请输入账号：admin" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleForm.password" clearable placeholder="请输入密码：123456" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Login } from '@/api/user'
export default defineComponent({
  setup() {
    // 定义表单的 ref
    const formRef = ref()
    // 定义表单的数据
    const ruleForm = reactive({
      name: '',
      password: ''
    })
    // 定义表单的规则
    const rules = {
      name: [{
        required: true,
        message: '请输入账号：admin',
        trigger: 'blur'
      }],
      password: [{
        required: true,
        message: '请输入密码：123456',
        trigger: 'blur'
      }]
    }
    const router = useRouter()
    // 提交表单
    const submitForm = () => {
      formRef.value.validate((valid: any) => {
        if (!valid) return false
        if (ruleForm.name === 'admin' && ruleForm.password === '123456') {
          // Login().then(res => {
          //   localStorage.setItem('thisToken', res.data.token)
          //   router.push({
          //     name: 'PageHome'
          //   })
          // })
          setTimeout(() => {
            localStorage.setItem('thisToken', 'res.data.token000007jsadjas')
            router.push({
              name: 'PageHome'
            })
          }, 500);
        } else {
          ElMessage.error('请输入正确的密令，不然进不去')
        }
      })
    }
    // 重置表单
    const resetForm = () => {
      formRef.value.resetFields()
    }
    return {
      ruleForm,
      rules,
      formRef,
      submitForm,
      resetForm
    }
  }
})
</script>

<style lang="scss" scoped>
  .login {
    width: 500px;
    min-height: 300px;
    margin: 100px auto;
  }
</style>
